<template>
  <div class="variableConfig">
     <div class="con">
        <div class="el-loading-mask" v-show="isMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
         </div>
         <div class="lefttree">
            <el-scrollbar style="height:calc(100% - 5px);width: 100%;">
                <div :class="['leftitem',{'active':nowLeftRow == item.name}]" v-for="(item,index) in leftData" :key="index" @click="getReadConFN(item)">
                    <img src="../../assets/btnImg/2.10.png" alt="">
                    <div class="myname">{{item.name2}}</div>
                </div>
            </el-scrollbar>
         </div>
         <div class="righttable">
            <div class="topbtn">
                <span></span>
                <div>
                    <el-button type="primary"  @click="tongbufn">同步</el-button>
                <el-button type="primary" class="last-el-button" @click="addfn">新增</el-button>
                </div>
            </div>
            <div class="mytable">
                <el-table id="demo" ref="table" height="100%" border  stripe :data="tableData" 
                    style="width: 100%">
                    <!-- <el-table-column type="selection" width="60" align="center"></el-table-column> -->
                    <el-table-column label="序号" type="index" width="60" align="center"> </el-table-column>
                    <el-table-column prop="group_total" label="点号">
                        <template #default="{row}">
                                <div class="public-flex" >
                                <span>{{row.details.point}}</span>
                                </div>
                        </template>
                     </el-table-column>
                     <!-- <el-table-column prop="tagName" label="标签名" min-width="170" ></el-table-column> -->
                    <el-table-column prop="ChineseName" label="名称" min-width="170" ></el-table-column>
                    <el-table-column prop="offset" label="通道号" >
                       <template #default="{row}">
                            <div class="public-flex" >
                            <span>{{row.details.channelId}}</span>
                            </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="unit_type" label="设备号">
                         <template #default="{row}">
                            <div class="public-flex" >
                            <span>{{row.details.deviceId}}</span>
                            </div>
                      </template>
                    </el-table-column>
                    
                    <el-table-column prop="group_total" label="变量类型" width="90"> 
                    <template #default="{row}">
                            <div class="public-flex" >
                            <span>{{row.details.type == 1 ? '遥测' : '遥信'}}</span>
                            </div>
                      </template>
                    
                    </el-table-column>
                    <el-table-column prop="group_total" label="上一个历史值" width="180"> 
                    <template #default="{row}">
                            <div class="public-flex" >
                            <span>{{row.details.pre}}</span>
                            </div>
                      </template>
                    
                    </el-table-column>
                    <el-table-column prop="group_total" label="当前值" width="180">
                    <template #default="{row}">
                            <div class="public-flex" >
                            <span style="color:green">{{row.details.value}}</span>
                            </div>
                      </template>
                     </el-table-column>
                    <el-table-column prop="group_total" label="时间" width="160">
                    <template #default="{row}">
                            <div class="public-flex" >
                            <span>{{row.details.time}}</span>
                            </div>
                      </template>
                     </el-table-column>
            
                    <el-table-column label="操作" width="120" align="center" fixed="right">
                    <template #default="{row}">
                        <div class="public-flex" >
                         <span style="color:#368ed9;cursor: pointer;" @click="editbingwang(row)">编辑</span>
                        </div>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
         </div>
         <!-- 新增/修改 -->
        <el-dialog width="500px" draggable  :title="caozuoType3"   v-model="addInverters">
                    <div class="choicedio">
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">标签名：</div>
                                <el-input v-model="nowItemnibianqi.tagName" :disabled='caozuoType3 =="修改"'></el-input>
                            </div>
                         </div>
                          <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">描述名：</div>
                                <el-input v-model="nowItemnibianqi.name"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">通道号(channelId)：</div>
                                <el-input v-model="nowItemnibianqi.channelId"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">设备号(deviceId)：</div>
                                <el-input v-model="nowItemnibianqi.deviceId"></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">点号(point)：</div>
                                <el-input v-model="nowItemnibianqi.point" :disabled='caozuoType3 =="修改"'></el-input>
                            </div>
                         </div>
                         
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">变量类型(type)：</div>
                                <el-select v-model="nowItemnibianqi.types" placeholder="请选择状态" style="width:100%"> 
                                                <el-option
                                                   v-for="item in enableList"
                                                   :key="item.value"
                                                   :label="item.label"
                                                   :value="item.value">
                                                </el-option>
                                 </el-select>
                            </div>
                         </div>
                          <div class="infoitems" v-if="caozuoType3 =='新增'">
                             <div class="items" style="width:100%">
                                <div class="leftname">上一次历史值(pre)：</div>
                                <el-input v-model="nowItemnibianqi.value" disabled></el-input>
                            </div>
                         </div>
                         <div class="infoitems" v-if="caozuoType3 =='修改'">
                             <div class="items" style="width:100%">
                                <div class="leftname">上一次历史值(pre)：</div>
                                <el-input v-model="nowItemnibianqi.pre" disabled></el-input>
                            </div>
                         </div>
                         <div class="infoitems">
                             <div class="items" style="width:100%">
                                <div class="leftname">当前值(value)：</div>
                                <el-input v-model="nowItemnibianqi.value"></el-input>
                            </div>
                         </div>
                          <div class="tips">提示：点号小于10000，当前值只能输入0或者1</div>
                    </div>
                    <div class="el-loading-mask" v-show="diaisMask">
                                    <div class="el-loading-spinner">
                                    <svg viewBox="25 25 50 50" class="circular">
                                        <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
                                    </svg>
                           </div>
                     </div>
                      <template #footer>
                                 <div class="dialog-footer">
                                 <el-button  @click="addInverters = false" >取 消</el-button>
                            <el-button  class="last-el-button" @click="addInvertersFn" type="primary">确 定</el-button>
                                 </div>
                    </template>
                  
                      
                    
        </el-dialog>
     </div>
  </div>
</template>

<script>
import {getreadJsonFileNames,getreadJsonFile,updateJsonFile,addJsonFile} from "../../api/groupTuningControl";
export default {

  data() {
    return {
      isMask:false,
      diaisMask:false,
      addInverters:false,
      leftData:[],
      nowLeftRow:"",
      tableData:[],
      caozuoType3:"新增",
      nowItemnibianqi:{
        "channelId": 0,
		"deviceId": 0,
		"point": 0,
		"pre": 0,
		"tagName": "",
		"types": 0,
		"value": 0,
        "name":"",
      },
      ChineseNameObj:[
        {
            EnglishName:"test_mode",
            ChineseName:"试验模式",
        },
        {
            EnglishName:"avc_status",
            ChineseName:"AVC 投退信号",
        },
        {
            EnglishName:"avc_control",
            ChineseName:"AVC 就地远方控制模式(远方1，就地0)",
        },
        {
            EnglishName:"avc_instruction",
            ChineseName:"AVC 当前指令:无功0、电压1",
        },
        {
            EnglishName:"avc_loop",
            ChineseName:"AVC 开闭环状态",
        },
        {
            EnglishName:"reactive_power_upper_lock",
            ChineseName:"AVC (无功)上调闭锁",
        },
        {
            EnglishName:"reactive_power_lower_lock",
            ChineseName:"AVC (无功)下调闭锁",
        },
        {
            EnglishName:"agc_status",
            ChineseName:"AGC 投退信号",
        },
        {
            EnglishName:"agc_control",
            ChineseName:"AGC 就地远方控制模式(远方1，就地0)",
        },
        {
            EnglishName:"agc_loop",
            ChineseName:"AGC 开闭环状态",
        },
        {
            EnglishName:"active_power_upper_lock",
            ChineseName:"AGC (有功)上调闭锁",
        },
        {
            EnglishName:"active_power_lower_lock",
            ChineseName:"AGC (有功)下调闭锁",
        },
        {
            EnglishName:"avc_control_state",
            ChineseName:"AVC 控制闭锁状态(闭锁1，开锁0)",
        },
        {
            EnglishName:"agc_control_state",
            ChineseName:"AGC 控制闭锁状态(闭锁1，开锁0)",
        },
        {
            EnglishName:"reactive_mode_use",
            ChineseName:"无功模式投入(关联AVC指令模式)",
        },
        {
            EnglishName:"voltage+mode_use",
            ChineseName:"电压模式投入",
        },
        {
            EnglishName:"reactive_power_grow",
            ChineseName:"无功可增容量",
        },
        {
            EnglishName:"reactive_power_drop",
            ChineseName:"无功可减容量",
        },
        {
            EnglishName:"voltage",
            ChineseName:"电压执行值",
        },
        {
            EnglishName:"reactive_power",
            ChineseName:"无功执行值",
        },
        {
            EnglishName:"active_power_upper",
            ChineseName:"AGC有功调节上限",
        },
        {
            EnglishName:"active_power_lower",
            ChineseName:"AGC有功调节下限",
        },
        {
            EnglishName:"active_power",
            ChineseName:"有功执行值",
        },
        {
            EnglishName:"voltage_upper_limit",
            ChineseName:"电压上调设定值",
        },
        {
            EnglishName:"voltage_lower_limit",
            ChineseName:"电压下调设定值",
        },
        {
            EnglishName:"reactive_upper_limit",
            ChineseName:"无功调节上限",
        },
        {
            EnglishName:"reactive_lower_limit",
            ChineseName:"无功调节下限",
        },
        {
            EnglishName:"number_of_instruction",
            ChineseName:"指令下达次数",
        },
      ],
      enableList:[
        {
            label:"遥测",
            value:1
        },
        {
            label:"遥信",
            value:0
        },
      ],
      nowDetails:{}
    };
  },

  mounted() {
   

    this.getList()
  },

  methods: {
    editbingwang(row){
        this.nowDetails = row.details
        this.caozuoType3 = "修改"
        this.nowItemnibianqi = JSON.parse(JSON.stringify(row.details))
        this.nowItemnibianqi.types = row.details.type
        this.nowItemnibianqi.tagName = row.tagName
        this.nowItemnibianqi.name = row.ChineseName
        // ChineseName
        this.addInverters = true
    },
    //同步
    tongbufn(){
         getreadJsonFileNames().then(res => {
             if(res.code == 200){
                 this.$message({showClose: true,message: '同步成功',type: 'success'});
             }else {
                 this.$message({showClose: true,message: '同步失败',type: 'error'});
             }
         })
    },
    addfn(){
       if(this.nowLeftRow === ""){
         this.$message({showClose: true,message: '请选择文件',type: 'warning'});
         return
       }
       this.caozuoType3 = "新增" 
       this.nowItemnibianqi = {
        "channelId": "",
		"deviceId": "",
		"point": "",
		"pre": "",
		"tagName": "",
		"types": 0,
		"value": ""
      }
       this.addInverters = true
    },
    getList(){
        getreadJsonFileNames().then(res => {
             if(res.code == 200){
                this.leftData = []
                 res.data.forEach(item => {
                    this.leftData.push({
                        name:item,
                        name2:item.replace('running','控制区').replace('.json','')
                    })
                    
                 })
                //  this.leftData = res.data
                if(this.leftData.length != 0){
                        this.getReadConFN(this.leftData[0])
                    }
             }
        })
    },
    getReadConFN(row){
        // console.log("修改新增",this.nowLeftRow);
        this.nowLeftRow = row.name
        var dataList = []
        this.tableData = []
        this.isMask = true
        getreadJsonFile({'fileName':this.nowLeftRow}).then(res => {
            this.isMask = false
            this.diaisMask = false
            if(res.code == 200){
                var RESDATA = res.data
                for (const key in RESDATA) {
                    if (RESDATA.hasOwnProperty(key)) { // 过滤掉原型链上的属性
                        dataList.push({
                            tagName:key,
                            details:RESDATA[key]
                        })
                    }
                }
                var arr1 = []
                dataList.forEach(item => {
                     item.details.time = this.date_format(Number(item.details.ts+'000'))
                     arr1 = this.ChineseNameObj.filter(tt => item.tagName == tt.EnglishName)
                     if(arr1.length != 0){
                        item.ChineseName = arr1[0].ChineseName
                     }
                })

                // console.log("dataList",dataList);
                dataList.sort((a, b) => a.details.point - b.details.point);
                dataList.forEach(item => {
                     if(item.details.name && item.details.name != ""){
                            item.ChineseName = item.details.name
                        }
                })
                this.tableData = dataList
            }
           
        })
    },
    addInvertersFn(){
        function isStrictNumber(value) {
          // 必须包含整数部分，小数部分可选
          return /^-?\d+(\.\d+)?$/.test(value);
        }
        if(!isStrictNumber(this.nowItemnibianqi.value)){
            this.$message({showClose: true,message: '当前值格式不正确，请输入正确的数字型',type: 'warning'});
            return
        }
        if(this.nowItemnibianqi.point === ""){
                this.$message({showClose: true,message: '点号不能为空',type: 'warning'});
                return
            }
        if(this.nowItemnibianqi.point < 10000){
            if(this.nowItemnibianqi.value != 0 && this.nowItemnibianqi.value != 1){
                this.$message({showClose: true,message: '点号小于10000的情况下，当前值只能输入0或者1',type: 'warning'});
                return
            }
        }
        if(this.caozuoType3 == '修改'){
            var dd = {
             fileName:this.nowLeftRow,
             data:[{
                "channelId": Number(this.nowItemnibianqi.channelId),
                "deviceId": Number(this.nowItemnibianqi.deviceId),
                "point": Number(this.nowItemnibianqi.point),
                "pre": Number(this.nowDetails.value),
                "name":this.nowItemnibianqi.name,
                "tagName":this.nowItemnibianqi.tagName,
                "types": this.nowItemnibianqi.types,
                "value": Number(this.nowItemnibianqi.value)
                }]
            }
            this.diaisMask = true
            updateJsonFile(dd).then(res => {
                if(res.code  == 200){
                    this.$message({showClose: true,message: '修改成功',type: 'success'});
                    this.addInverters =false
                    this.getReadConFN({name:this.nowLeftRow})
                }else {
                    this.diaisMask = false
                    this.$message({showClose: true,message: '修改失败',type: 'error'});
                }
            })
        }else {
            if(this.nowItemnibianqi.tagName === ""){
                this.$message({showClose: true,message: '标签名不能为空',type: 'warning'});
                return
            }
             var dd = {
             fileName:this.nowLeftRow,
             data:{
                "channelId": Number(this.nowItemnibianqi.channelId),
                "deviceId": Number(this.nowItemnibianqi.deviceId),
                "point": Number(this.nowItemnibianqi.point),
                "pre": Number(this.nowItemnibianqi.value),
                "name":this.nowItemnibianqi.name,
                "tagName":this.nowItemnibianqi.tagName,
                "types": this.nowItemnibianqi.types,
                "value": Number(this.nowItemnibianqi.value)
                }
            }
            this.diaisMask = true
            addJsonFile(dd).then(res => {
                if(res.code  == 200){
                    this.$message({showClose: true,message: '新增成功',type: 'success'});
                    this.addInverters =false
                    this.getReadConFN({name:this.nowLeftRow})
                }else {
                    this.diaisMask = false
                    this.$message({showClose: true,message: '新增失败',type: 'error'});
                }
            })
        }
         
    },
    date_format(value) { //value就是插值的数据
        if(!value) {
          return ""
        }
        let date=new Date(value);
        let Y=date.getFullYear()+'-';
        let M=(date.getMonth()+1<10? '0'+(date.getMonth()+1):date.getMonth()+1)+'-';
        let D=(date.getDate()<10? '0'+(date.getDate()):date.getDate())+' ';

        let h=(date.getHours()<10? '0'+(date.getHours()):date.getHours())+':';
        let m=(date.getMinutes()<10? '0'+(date.getMinutes()):date.getMinutes())+':';
        let s=(date.getSeconds()<10? '0'+(date.getSeconds()):date.getSeconds());
        let strDate=Y+M+D+h+m+s;
        return strDate
      },
  },
};
</script>
<style lang="scss" scoped>
    .variableConfig {
         width: 100%;
         height: 100%;
         .leftname {
             min-width: 130px !important;
             text-align: right;
         }
         .tips {
             margin-left: 130px;
             color: red;
         }
         .con {
             width: 100%;
             height: 100%;
             display: flex;
             position: relative;
             .lefttree {
                 width: 280px;
                 height: 100%;
                 background-color: #fff;
                 margin-right: 8px;
                 padding: 12px;
                 box-sizing: border-box;
                 .leftitem {
                     width: 100%;
                     height: 38px;
                     display: flex;
                     align-items: center;
                     padding-left: 12px;
                     box-sizing: border-box;
                     border: 1px solid #EBEBEB;
                     border-radius: 4px;
                     cursor: pointer;
                     margin-bottom: 12px;
                     img {
                        width: 20px;
                        height: 20px;
                         margin-right: 4px;
                     }
                     &.active {
                         background-color: #2178f1 !important;
                        color: #fff !important;
                     }
                     &:hover{
                        background-color: #bcddff;
                        color: #1A1A1A;
                     }
                 }
             }
             .righttable {
                 width: calc(100% - 288px);
                 height: 100%;
                 background-color: #fff;
                 padding: 12px;
                 box-sizing: border-box;
                 .topbtn {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
                 margin-bottom: 12px;
              }
              
              .mytable {
                 width: 100%;
                 height: calc(100% - 42px);
                 .public-flex {
                     span {
                         font-size: 14px;
                     }
                 }
              }
             }
         }
    }
</style>